Orientation fix for mobile #38
Conversation
Codecov Report
@@ Coverage Diff @@
## master #38 +/- ##
==========================================
- Coverage 100% 99.12% -0.88%
==========================================
Files 10 10
Lines 108 114 +6
Branches 19 22 +3
==========================================
+ Hits 108 113 +5
- Partials 0 1 +1
Continue to review full report at Codecov.
|
| if (isMobileDevice()) { | ||
| return isLandscape() ? "landscape-primary" : "portrait"; | ||
| } else { | ||
| return window.screen.orientation.type; |
There was a problem hiding this comment.
We should replace window.screen.orientation with something else since it's not fully supported yet by all browsers
There was a problem hiding this comment.
What about this? https://polyfill.io/v2/docs/features/#screen_orientation
| @@ -1,16 +1,29 @@ | |||
| import React, { Component } from "react"; | |||
| import PropTypes from "prop-types"; | |||
|
|
|||
| const isMobileDevice = () => | |||
| typeof window.orientation !== "undefined" || | |||
There was a problem hiding this comment.
I'm afraid that window.orientation is not going to be our best friend since it's deprecated.
There was a problem hiding this comment.
Oh wow I wasn't aware of this, I'll look for an alternative approach 😅
There was a problem hiding this comment.
There was a problem hiding this comment.
I think we should re-think the solution because the device orientation stuff is kind of experimental. Basically, the idea behind the feature is to prevent the game to be rendered in small screens. We can simply do that based on the screen width and use the resize event to swap components as we currently do with the Orientation component. What do you think?
There was a problem hiding this comment.
👌 makes sense, I can make those changes. Do you have a minimum width in mind?
There was a problem hiding this comment.
Let's show the Game component at minimum 542px width. Below we can just show the RotateInfo component. Please, remember to listen to the resize event and also perform the check on mounting phase. Test your code and include yourself into the contributor's list :) Thanks again for the collaboration!
There was a problem hiding this comment.
Yo, I had a lot going on at work 😅 I'm almost done, will definitely push this week.
Description
Game didn't work on mobile devices, this is one way to fix it. Feedback is welcome :)
Fixes #37
Checklist: